'use client'

import { useState } from 'react'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import VisualizationDashboard from './VisualizationDashboard'

export default function DashboardDemo() {
  const [showDashboard, setShowDashboard] = useState(false)

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 p-8">
      <div className="max-w-4xl mx-auto">
        <div className="text-center mb-8">
          <h1 className="text-3xl font-bold text-gray-900 mb-4">
            医疗数字孪生可视化大屏演示
          </h1>
          <p className="text-gray-600 text-lg">
            展示实时监控、数据可视化和交互式仪表板
          </p>
        </div>

        {!showDashboard ? (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <Card className="hover:shadow-lg transition-shadow">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  📊 实时监控
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600 mb-4">
                  24小时实时数据监控，包括患者流量、设备使用率和紧急呼叫
                </p>
                <Button
                  onClick={() => setShowDashboard(true)}
                  className="w-full"
                >
                  启动大屏
                </Button>
              </CardContent>
            </Card>

            <Card className="hover:shadow-lg transition-shadow">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  🎨 毛玻璃效果
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600 mb-4">
                  现代化的毛玻璃设计，透明背景和模糊效果
                </p>
                <div className="bg-blue-500/20 backdrop-blur-sm rounded-lg p-4 text-center">
                  <p className="text-blue-800 font-medium">毛玻璃预览</p>
                </div>
              </CardContent>
            </Card>

            <Card className="hover:shadow-lg transition-shadow">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  📱 响应式设计
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600 mb-4">
                  支持不同屏幕尺寸，左右两侧图表各占25%宽度
                </p>
                <div className="grid grid-cols-2 gap-2">
                  <div className="bg-gray-200 rounded h-8"></div>
                  <div className="bg-gray-200 rounded h-8"></div>
                </div>
              </CardContent>
            </Card>

            <Card className="hover:shadow-lg transition-shadow">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  ⚡ 实时更新
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600 mb-4">
                  每10秒自动刷新数据，支持手动刷新和全屏模式
                </p>
                <div className="flex items-center gap-2 text-sm text-green-600">
                  <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
                  实时运行中
                </div>
              </CardContent>
            </Card>

            <Card className="hover:shadow-lg transition-shadow">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  🎯 交互体验
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600 mb-4">
                  悬停效果、图表交互、状态指示和动画效果
                </p>
                <div className="space-y-2">
                  <div className="flex items-center gap-2">
                    <div className="w-3 h-3 bg-green-500 rounded-full"></div>
                    <span className="text-sm">优秀</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <div className="w-3 h-3 bg-blue-500 rounded-full"></div>
                    <span className="text-sm">良好</span>
                  </div>
                </div>
              </CardContent>
            </Card>

            <Card className="hover:shadow-lg transition-shadow">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  🔧 技术特性
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600 mb-4">
                  基于 ECharts、React Hooks 和 Tailwind CSS
                </p>
                <div className="space-y-1 text-sm">
                  <div>• ECharts 图表渲染</div>
                  <div>• React Hooks 状态管理</div>
                  <div>• Tailwind CSS 样式</div>
                </div>
              </CardContent>
            </Card>
          </div>
        ) : (
          <div className="space-y-4">
            <div className="flex justify-between items-center">
              <h2 className="text-xl font-semibold text-gray-900">
                可视化大屏演示
              </h2>
              <Button
                variant="outline"
                onClick={() => setShowDashboard(false)}
              >
                返回介绍
              </Button>
            </div>
            <VisualizationDashboard />
          </div>
        )}
      </div>
    </div>
  )
}
